<template>
  <div>
    <el-row>
      <el-button-group>
        <el-button @click="reset">重置</el-button>
        <el-button @click="selectAll">全选</el-button>
        <el-button @click="turnSelectd">反选</el-button>
        <el-button @click="cancelSelectd">全不选</el-button>
        <el-button @click="generate">生成</el-button>
        <el-button @click="delectSelect">删除所选</el-button>
        <el-button @click="keepSelect">保留所选</el-button>
        <el-button @click="sort">排序</el-button>
      </el-button-group>
    </el-row>
    <el-divider content-position="left">content</el-divider>
    <div class="content" ref="content">
      <el-collapse v-model="activeNames">
        <el-collapse-item title="edit table" name="1">
          <el-row>
            <el-col :span="3">
              <el-checkbox v-model="noOperation">noOperation</el-checkbox>
            </el-col>
            <el-col :span="3">
              <el-checkbox v-model="neednormalData">neednormalData</el-checkbox>
            </el-col>
            <el-col :span="6">
              <el-form label-width="80px">
                <el-form-item label="表格名称" label-width="80px">
                  <el-input v-model="tableName"></el-input>
                </el-form-item>
              </el-form>
            </el-col>
          </el-row>
          <el-row class="row-head" :gutter="20">
            <el-col :span="1">
              <el-checkbox disabled></el-checkbox>
            </el-col>
            <el-col :span="2">操作</el-col>
            <el-col :span="3">name</el-col>
            <el-col :span="3">chineseName</el-col>
            <el-col :span="2">自定义排序</el-col>
          </el-row>
          <draggable v-model="list" group="people" @start="drag=true" @end="drag=false">
            <el-row
              :gutter="20"
              class="drag-item"
              v-for="(item,index) in list"
              :key="index"
              type="flex"
              align="center"
            >
              <el-col :span="1">
                <el-checkbox v-model="item.selected"></el-checkbox>
              </el-col>
              <el-col :span="2">
                <el-button
                  type="text"
                  icon="el-icon-circle-plus"
                  circle
                  @click="innerAddRow(index)"
                ></el-button>
                <el-button type="text" icon="el-icon-delete" circle @click="onDeleteRow(index)"></el-button>
              </el-col>
              <el-col :span="3">
                <el-input v-model="item.name"></el-input>
              </el-col>
              <el-col :span="3">
                <el-input v-model="item.chineseName" @blur="nameInputBlur(index)"></el-input>
              </el-col>
              <el-col :span="2">
                <el-input v-model="item.sort" @input="sortInput(index)"></el-input>
              </el-col>
            </el-row>
          </draggable>
        </el-collapse-item>
        <el-collapse-item title="tableString" name="2">
          <div>{{ tableString }}</div>
        </el-collapse-item>
      </el-collapse>
    </div>
  </div>
</template>

<script>
import draggable from 'vuedraggable'
import { generateTable } from '@/util/generator/index'
import { copyToClipboard } from '@/util/index'

const normalData = [
  { selected: true, name: 'createBy', chineseName: '创建人' },
  { selected: true, name: 'createDate', chineseName: '创建时间' },
  { selected: true, name: 'modifyBy', chineseName: '更新人' },
  { selected: true, name: 'modifyDate', chineseName: '更新时间' }
]

export default {
  components: {
    draggable
  },
  mounted() {
    this.setDataList()
  },
  data() {
    return {
      activeNames: ['1'],
      list: [],
      tableString: '',
      neednormalData: true,
      noOperation: true,
      tableName: ''
    }
  },
  methods: {
    setDataList() {
      this.list = [{ selected: true, name: '', chineseName: '' }]
    },
    reset() {
      this.setDataList()
      this.activeNames = ['1']
    },
    selectAll() {
      this.list.forEach((item, index) => {
        item.selected = true
      })
    },
    cancelSelectd() {
      this.list.forEach(item => {
        if (item.selected) {
          item.selected = false
        }
      })
    },
    turnSelectd() {
      this.list.forEach(item => {
        item.selected = !item.selected
      })
    },
    generate() {
      let selectedData = this.list.filter(item => item.name !== '')
      if (this.neednormalData) {
        selectedData = selectedData.concat(normalData)
      }
      this.tableString = generateTable(selectedData, this.noOperation, this.tableName)
      copyToClipboard(this.tableString, this)
      this.activeNames = ['3']
    },
    delectSelect() {
      this.list = this.list.filter(item => item.selected === false)
    },
    keepSelect() {
      this.list = this.list.filter(item => item.selected === true)
    },
    innerAddRow(index) {
      this.list.splice(index + 1, 0, {
        selected: false,
        name: '',
        chineseName: ''
      })
    },
    onDeleteRow(index) {
      this.list.splice(index, 1)
    },
    sortInput(index) {
      if (index !== '') {
        this.list[index].selected = true
      }
    },
    nameInputBlur(index) {
      const allData = this.$store.state.allData
      const name = this.list[index].chineseName
      if (name === '') {
        return
      }
      const dataItem = allData.find(item => item.chineseName === name)
      if (dataItem) {
        this.list[index].name = dataItem.name
        if (index === this.list.length - 1) {
          this.list.push({ selected: true, name: '', chineseName: '' })
        }
      } else {
        this.$message.error('key不存在')
      }
    },
    sort() {
      const needSort = this.list.filter(item => item.sort > 0).sort((a, b) => a.sort - b.sort)
      const elseList = this.list.filter(item => !item.sort)
      this.list = needSort.concat(elseList)
      this.$refs.content.scrollTop = 0
    }
  }
}
</script>

<style lang="scss" scoped>
.content {
  height: 800px;
  overflow-y: auto;
}
.row-head {
  padding: 10px;
  border-bottom: 1px solid #e6e6e6;
  border-top: 1px solid #e6e6e6;
  background: #e6e6e6;
}
.drag-item {
  padding: 5px 10px;
  border-bottom: 1px solid #e6e6e6;
  cursor: move;
  .el-col {
    line-height: 28px;
  }
}
</style>